/**
 * 学习目标：ReactRouter的使用步骤-BrowserRouter路由的使用
 * 
 * 
 * ### Router详细说明

+ Router 组件：包裹整个应用，一个 React 应用只需要使用一次
+ 两种常用 Router：`HashRouter` 和 `BrowserRouter`  
+ HashRouter：使用 URL 的哈希值实现（http://localhost:3000/#/first）
  - 原理：监听 window 的 `hashchange` 事件来实现的
+ （推荐）BrowserRouter：使用 H5 的 history API 实现（http://localhost:3000/first）
  - 原理：监听 window 的 `popstate` 事件来实现的



👍 最佳实践： 使用as语法将重命名为Router
 */
import React, { Component } from 'react'
// 1. 下包 react-router-dom@5.3
// 2. 导入组件： HashRouter, Route, Link
import { HashRouter, Route, Link, BrowserRouter as Router } from 'react-router-dom';
// import { HashRouter as Router, Route, Link } from 'react-router-dom';

// 推荐👍 通过ES6的as语法来重命名路由器为Router
export default class App extends Component {

    render() {
        return (
            // 3. 使用Router包住所有的代码
            <Router>
                <div>
                    <h1>app组件</h1>
                    <div>
                        {/* 5. 使用Link组件，to属性去跳转 💥一般开头带上/ */}
                        <Link to="/home">跳到Home</Link>
                        <br />
                        <Link to="/my">跳到我的音乐</Link>
                        <br />
                        <Link to="/friend">跳到朋友</Link>
                    </div>
                    {/* 4. 使用Route组件，指定路径与组件之前的对应关系 */}
                    <Route path="/home" component={Home} />
                    <Route path="/my" component={MyMusic} />
                    <Route path="/friend" component={Friend} />
                </div>
            </Router>
        )
    }
}
// 0. 创建子组件
function Home() {
    return <div>home</div>
}
function MyMusic() {
    return <div>MyMusic</div>
}
function Friend() {
    return <div>Friend</div>
}